<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            background-color: #7B8CFE;
        }

        .container {
            height: 100%;
            background-color: #7B8CFE;
        }

        .login-wrapper {
            background-color: #fff;
            width: 22.375rem;
            height: 36.75rem;
            border-radius: 0.9375rem;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }

        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .btn {
            padding: 10px;
            text-align: center;
            margin-top: 40px;
            background-color: #7B8CFE;
            border: .0625rem solid #7B8CFE;
            color: #fff;
            border-radius: .625rem;
        }

        .btn:hover {
            background-color: #ffffff;
            border: .0625rem solid #7B8CFE;
            color: #000000;
        }

        .msg {
            text-align: center;
            line-height: 5.5rem;

        }

        .login {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>

<body>
    <div class="container" id="root">
        <div class="login-wrapper">
            <div class="header">注册</div>
            <div class="form-wrapper">
                <input type="text" name="username" placeholder="用户名" class="input-item" id="username">
                <input type="password" name="password" placeholder="密码" class="input-item" id="password">
                <div class="btn" @click="signUp">注册</div>
            </div>
            <div class="msg" style="display: none;">
                无账号？
                <a href="./signUp.html" class="login">请注册</a>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="../node_modules/axios/dist/axios.js"></script>
<script>
    const v = new Vue({
        el: "#root",
        methods: {
            signUp() {
                const userName = document.getElementById("username").value
                const passWord = document.getElementById("password").value
                if (userName && passWord) {
                    axios({
                        url: 'http://localhost:9999/user/signUp',
                        method: 'POST',
                        data: {
                            userName: userName,
                            passWord: passWord
                        },
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(response => {
                        if (response.data.code == 1) {
                            if (confirm("注册成功！")) {
                                window.location.href = "./login.html";
                            }
                        } else if (response.data.code == -1) {
                            document.getElementById("username").style =
                                "color:red;border-bottom: 1px solid red;"
                            alert("你的用户名重复啦！")
                        }
                    }).catch(error => {
                        console.error(error.message)
                    })
                }else{
                    alert('请输入完整的账号和密码')
                }
            }
        },
    })
</script>

</html>